//一些颜色定义

// 常用的半透明灰度颜色
.bg-grey-10-alpha80
  background: rgba($grey-10, .8)
// Info颜色再浅一点
.bg-info-lighten
  background: rgba($info, .6)
// Warning颜色再浅一点
.bg-warning-lighten
  background: rgba($warning, .6)
// Negative颜色再浅一点
.bg-negative-lighten
  background: rgba($negative, .6)

// 定义几种简单的边框
.simple-border
  border: $layout-border
.simple-border-top
  border-top: $layout-border
.simple-border-bottom
  border-bottom: $layout-border
.simple-border-left
  border-left: $layout-border
.simple-border-right
  border-right: $layout-border

// 页脚样式
$footer-font-size: 12px
$footer-min-height: 35px
.q-footer
  .q-toolbar
    min-height: $footer-min-height
  .q-toolbar__title
    font-size: $footer-font-size

// 实在不喜欢hover的动画效果，显得慢
.q-focus-helper, .q-item
  transition: none !important

// field的变化效果也拿掉，显得慢
.q-field__control, .q-field__control:after
  transition: none !important

// 主要为了缩小侧栏菜单图标与文本的间距
.q-item__section--avatar
  min-width: 40px

// 让notify出现消失的动画加快
.q-notification
  transition: transform .3s, opacity .3s

// code标签的背景加点灰色
code
  background: rgba($grey-1, .6)
  border-radius: 3px
  padding: 0 3px
  margin: 0 3px

// 表头默认样式
.q-table
  th
    background-color: #EEE
    font-weight: bold
    opacity: 1
  // 不显示选中时候的灰色背景（难看）
  tbody
    td:after
      background-color: rgba($primary, .05)

// 表格左右不需要额外边距
.q-table--dense .q-table th:first-child, .q-table--dense .q-table td:first-child
  padding-left: 8px
.q-table--dense .q-table th:last-child, .q-table--dense .q-table td:last-child
  padding-right: 8px
// 补全全屏状态下最后一行的线
.q-table__container.fullscreen,.generic-sticky-header-table
  .q-table tr:last-child td
    border-bottom-width: 1px

// 默认a标签不带下划线
a
  text-decoration: none

// 解除按钮高度限制，允许按钮被调整为较为紧凑的风格
.q-btn__wrapper
  min-height: 0 !important
// ↑失效 vue3
.q-btn-item
  min-height: 0 !important

// 表头内边距要和"工具条"内边距一致
.q-table--dense .q-table__top, .q-table__bottom
  padding: 8px

// 让按钮上的图标所处在的位置看起来更加舒服一点
.q-btn__content .on-left
  margin-left: -2px
  margin-right: 8px

// 让select控件和input控件变得更加紧凑
.q-list--dense > .q-item, .q-item--dense
  min-height: 28px
.q-field--auto-height .q-field__native, .q-field--auto-height .q-field__prefix, .q-field--auto-height .q-field__suffix
  line-height: 16px
.q-select.q-field--dense, .q-input.q-field--dense, .q-field--auto-height.q-field--dense
  .q-field__control, .q-field__marginal, .q-field__native
    height: 28px
    min-height: 28px

// filed的内边距也紧凑点
.q-field--outlined .q-field__control
  padding: 0 8px

// 输入框的小图标跟着变小(紧凑)点
.q-field__marginal
  font-size: 18px

//TextArea的padding也紧凑点
.q-textarea.q-field--dense .q-field__native
  padding-top: 6px
  padding-bottom: 6px

// 下拉框内容位置偏移
.q-field__input
  min-height: 18px

// 输入框在readonly时呈现灰色
.q-field--readonly
  background: $readonly

// 让树形结构更加紧凑一些
.q-tree__node-header
  margin-top: 0
  padding: 3.5px
  padding-left: 4px

// 去除搜索栏按钮右侧内边距
.q-item__section--side
  padding-right: 0 !important

// 去除菜单弹出的动画效果
.q-menu
  transition: none !important

// 放在表格行中的按钮的附加样式
.btn-in-row
  font-size: 12px
  line-height: 12px

// 放在搜索栏上的Label的附加样式，帮助垂直居中
.searchbar-label
  line-height: 28px

// 通用的固定表头的表格样式
// 注意：使用此样式需要手工给q-table加上height或max-height样式
.generic-sticky-header-table
  thead tr th
    position: sticky
    z-index: 1
  thead tr:first-child th
    top: 0
  &.q-table--loading thead tr:last-child th
    top: 28px

// 给btn-toggle加个主色调边框
.bordered-toggle-btn
  border: 1px solid $primary

// 让验证出错的提示文本靠空间近一点
.q-field__bottom
  padding: 4px 4px 0

// 减少Stepper的内边距，适用WMS PDA客户端的需求
.q-stepper__header--standard-labels .q-stepper__tab
  min-height: 0 !important
.q-stepper__tab
  padding: 5px 0 !important
.q-stepper--horizontal .q-stepper__step-inner
  padding: 0 !important

// 简单静态表格样式定义
.simple-static-table
  border-collapse: collapse
.simple-static-table
  th
    background-color: #EEE
    font-weight: bold
    opacity: 1
    height: 28px
  table,th,td
    border: $layout-border
    padding: 2px 8px

.q-btn
  min-height: 0em !important
